<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" v-auth="['seatransportation:order:create']" :preIcon="IconEnum.ADD" @click="handleCreate">
          {{ t('action.create') }}
        </a-button>
        <a-button type="warning" v-auth="['seatransportation:order:export']" :preIcon="IconEnum.EXPORT" @click="handleExport">
          {{ t('action.export') }}
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
             :actions="[
                   {
                label: '详情',
                icon: IconEnum.LOG,
                onClick: handleShowInfo.bind(null, record)
              }
                  ,{
                label: '查看日志',
                icon: IconEnum.LOG,
                onClick: viewRecord.bind(null, record)
              }
              /* { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'seatransportation:order:update', onClick: handleEdit.bind(null, record) },
               {
                  icon: IconEnum.DELETE,
                  color: 'error',
                  label: t('action.delete'),
                  auth: 'seatransportation:order:delete',
                  popConfirm: {
                    title: t('common.delMessage'),
                    placement: 'left',
                    confirm: handleDelete.bind(null, record)
                  }
              },*/
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <OrderModal @register="registerModal" @success="reload()"/>
    <OrderRecordModal @register="registerRecordModal" />
  </div>
</template>
<script lang="ts" setup>

  import {useI18n} from '@/hooks/web/useI18n'
  import {useMessage} from '@/hooks/web/useMessage'
  import {useModal} from '@/components/Modal'
  import OrderModal from './OrderModal.vue'
  import OrderRecordModal from './OrderRecordModal.vue'

  import {IconEnum} from '@/enums/appEnum'
  import {BasicTable, useTable, TableAction} from '@/components/Table'
  import {deleteOrder, exportOrder, getOrderPage} from '@/api/seatransportation/order'
  import {columns, searchFormSchema} from './order.data'
  import {useDrawer} from "@/components/Drawer";

  defineOptions({name: 'Order'})

  const {t} = useI18n()
  const {createConfirm, createMessage} = useMessage()
  const [registerModal, {openModal}] = useModal()
  const [registerScopeModal, {openModal: openScopeModal}] = useModal()
  const [registerRecordModal, {openModal: openRecordModal}] = useModal()


  const [registerDrawer, {openDrawer}] = useDrawer();
  const [registerTable, {getForm, reload}] = useTable({
    title: '海运订单列表',
    api: getOrderPage,
    columns,
    formConfig: {labelWidth: 120, schemas: searchFormSchema},
    useSearchForm: true,
    showTableSetting: true,
    actionColumn: {
      width: 140,
      title: t('common.action'),
      dataIndex: 'action',
      fixed: 'right'
    }
  })

  function handleCreate() {
    openModal(true, {isUpdate: false})
  }

  function handleEdit(record: Recordable) {
    openModal(true, {record, isUpdate: true})
  }


  function handleMenu(record: Recordable) {
    openMenuModal(true, {record})
  }

  function handleDataScope(record: Recordable) {
    openScopeModal(true, {record})
  }


  async function handleExport() {
    createConfirm({
      title: t('common.exportTitle'),
      iconType: 'warning',
      content: t('common.exportMessage'),
      async onOk() {
        await exportOrder(getForm().getFieldsValue())
        createMessage.success(t('common.exportSuccessText'))
      }
    })
  }

  async function handleDelete(record: Recordable) {
    await deleteOrder(record.id)
    createMessage.success(t('common.delSuccessText'))
    reload()
  }

  const handleShowInfo = (record: Recordable) => {
    openModal(true, record)
  }
  //详情打开弹框
  const viewRecord = (record: Recordable) => {
    openRecordModal(true,record)
  }


/*  export default defineComponent({
    components: { OrderRecordIndex },
    setup() {
      const [register, { openModal }] = useModal();
      return {
        register,
        openModal
      };
    },
  });*/



</script>


<style>
  .ant-modal-content {
    width: 1400px;
    margin-left: -200px;
  }
</style>
